<template>
  <van-nav-bar left-arrow @click-left="onClickLeft" :border="false" />
  <div class="myPage">
    <div class="userWrap">
      <div class="userAvatar">
        <img src="@/assets/head.jpg" alt="" />
      </div>
      <div class="userInfo">
        <span>手工客123</span>
        <br />
        <span
          >手工客号:123455
          <br />
          <span class="areaInfo">北京市 东城</span>
          <span class="areaInfo">女生</span>
        </span>
      </div>
      <div class="userWebsite"></div>
    </div>
    <p class="signP">这家伙太懒!什么也没写</p>
    <div class="item">
      <div class="attRen">
        <span @click="attNum">2 <span class="grayFont">关注</span></span>
      </div>
      <div class="fans">
        <span @click="fansNum">1 <span class="grayFont">粉丝</span></span>
      </div>
      <div class="compile" v-show="!myDiv">
        <span @click="compile">编辑</span>
      </div>
      <div class="taDiv" v-show="myDiv">
          <span v-show="isTa" class="taSpan" @click="goAtt">+ 关注</span>
          <span v-show="!isTa" class="taIcons"  @click="cancelAtt">已关注</span>
         <span class="taIcon">
          <van-icon name="chat-o" />
         </span>
        </div>
    </div>
    <van-divider />
    <van-tabs v-model:active="active">
      <van-tab
        :name="item.name"
        v-for="(item, index) in list"
        :key="index"
        :title="item.name"
        :to="{ name: item.path_name }"
      />
      <router-view></router-view>
      
    </van-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

function onClickLeft(){
    router.push({
    name: "my",
  });
};
const active = ref(0);
const myDiv = ref(false)
const isTa = ref(true)

const list = reactive([
  {
    name: "收藏",
    path_name: "storeUp",
  },
  {
    name: "手工圈",
    path_name: "handRing",
  },
  {
    name: "教程",
    path_name: "tutorial",
  },
 
]);
function compile() {
    router.push({
    name: "changeInfo",
  });
}
function attNum() {
  router.push({
    name: "attNum",
  })
  
}
function fansNum() {
  router.push({
    name: "fansNum",
  })
  
}
function goAtt() {
 isTa.value = false
}
function cancelAtt() {
  isTa.value = true
}
</script>
<style scoped>
.myPage {
  padding: 10px;
}
.userWrap {
  width: 100%;
  display: flex;
  margin-bottom: 15px;
}
.userAvatar .userWebsite {
  flex: 1;
}
.userAvatar {
  display: flex;
  justify-content: center;
  align-items: center;
}
.userAvatar > img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.userInfo {
  flex: 2;
  /* line-height: 25px; */
}
.userInfo > span:nth-child(3) {
  color: gray;
  font-size: 10px;
}
.areaInfo {
  background-color: rgba(220, 220, 220, 0.385);
  padding: 3px;
  margin-right: 5px;
  border-radius: 5px;
}
.signP {
  font-size: 10px;
}
.item {
  display: flex;
  padding: 10px;
}
.attRen {
  flex: 1;
}
.fans {
  flex: 3;
}
.compile {
  flex: 1;
  border: 1px solid gainsboro;
  text-align: center;
  border-radius: 20px;
  font-size: 13px;
}
.taDiv>span{
  padding: 3px 4px;
  font-size: 14px;
  border-radius: 10px;
}
.taSpan {
  background-color: red;
  color: white;
}
.taIcons{
  color: gray;
  border: 1px solid gainsboro;
}
.taIcon {
  margin-left: 10px;
  color: gray;
  border: 1px solid gainsboro;
}

.grayFont {
  color: grey;
  font-size: 12px;
}
</style>

<style>
.van-icon-arrow-left:before {
  color: gainsboro;
}
.van-tab--active {
  color: red;
}
</style>